<template>
  <div class="index">
    <img class="bgIndex" src="../assets/index.png" alt />
    <div class="centerContent">
      <Alert>输入房间号以加入游戏</Alert>
      <Input
        v-model="hostId"
        placeholder="请输入房间号..."
        style="width: calc(100% - 40px); margin: 20px"
      />
      <Button type="primary" style="margin: 20px 5px" @click="join"
        >加入房间</Button
      >
      <Button style="margin: 20px 5px" @click="back">返回</Button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hostId: "",
    };
  },
  methods: {
    join() {
      if (this.hostId != "") {
        this.$axios
          .get("/langren/room/" + this.hostId)
          .then((res) => {
            if (res.data.code == 200) {
              localStorage.hostId = this.hostId;
              localStorage.hostSetting = JSON.stringify(res.data.data);

              localStorage.removeItem("creator");
              this.$router.push("/host");
            } else {
              this.$Message.error("房间不存在，请重试");
            }
          })
          .catch((err) => {
            console.log(err);
            this.$Message.error("服务器错误，请重试");
          });
      } else {
        this.$Message.warning("输入房间号以加入游戏");
      }
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.index {
  position: relative;
  overflow: hidden;
}
.bgIndex {
  height: 100vh;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.centerContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* height: 200px; */
  width: 95%;
  max-width: 680px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  padding: 20px;
}
</style>